<template>
  <el-dialog
    title="企业问卷"
    :visible.sync="DialogVisible"
    width="60%"
    center
  >
    <div class="iframe_box">
      <div class="head_box">
        <div class="short_name">{{ item.shortName || "null" }}</div>
        <div class="head_box_right">
          <div class="enterprise_name">{{ item.corpName }}</div>
          <div class="enterprise_xydm">统一代码 {{ item.corpCredit }}</div>
        </div>
      </div>
    </div>
    <div class="contant_box">
      <div class="title_box">
        <img
          src="@/assets/images/REQUIRED.png"
          alt=""
          class="REQUIRED_imp"
        />
        01. <span class="question_type">【填写】</span> 企业联系人姓名
      </div>
      <div class="input_box">
        <el-input
          placeholder="请输入内容"
          v-model="answer.q1"
          :disabled="true"
        >
        </el-input>
      </div>

      <div class="title_box">
        <img
          src="@/assets/images/REQUIRED.png"
          alt=""
          class="REQUIRED_imp"
        />
        02. <span class="question_type">【填写】</span> 企业联系人手机号
      </div>
      <div class="input_box">
        <el-input
          placeholder="请输入内容"
          v-model="answer.q2"
          :disabled="true"
        >
        </el-input>
      </div>


      <div class="title_box">
        <img
          src="@/assets/images/REQUIRED.png"
          alt=""
          class="REQUIRED_imp"
        />
        03. <span class="question_type">【填写】</span> 企业实际经营地址
      </div>
      <div class="input_box">
        <el-input
          placeholder="请输入内容"
          v-model="answer.q3"
          :disabled="true"
        >
        </el-input>
      </div>

      <div class="title_box">
        <img
          src="@/assets/images/REQUIRED.png"
          alt=""
          class="REQUIRED_imp"
        />
        04. <span class="question_type">【单选】</span> 企业目前有无贷款需求:
      </div>
      <div class="input_box">
        <div>
          <el-radio-group v-model="answer.q4">
            <div class="Radio_box">
              <el-radio label="A" disabled>A、50万以下</el-radio>
            </div>
            <div class="Radio_box">
              <el-radio label="B" disabled>B、50-100万</el-radio>
            </div>
            <div class="Radio_box">
              <el-radio label="C" disabled>C、100-200万</el-radio>
            </div>
            <div class="Radio_box">
              <el-radio label="D" disabled>D、200-500万</el-radio>
            </div>
            <div class="Radio_box">
              <el-radio label="E" disabled>E、500万以上</el-radio>
            </div>
            <div class="Radio_box">
              <el-radio label="F" disabled>F、无贷款需求</el-radio>
            </div>
          </el-radio-group>
        </div>
      </div>
      <div class="title_box">
        <img
          src="@/assets/images/REQUIRED.png"
          alt=""
          class="REQUIRED_imp"
        />
        05.
        <span class="question_type">【多选】</span>
        如果企业出现资金紧张的主要原因是:
      </div>
      <div class="input_box">
        <div>
          <div class="Radio_box">
            <el-checkbox v-model="answer.q5_a" disabled>
              <div class="check_box">
                A、生产投资规模扩张过快，流动资金配套跟不上需求
              </div>
            </el-checkbox>
          </div>
          <div class="Radio_box">
            <el-checkbox v-model="answer.q5_b" disabled>
              <div class="check_box">
                B、原材料涨价过快，自身产品难以随之上调价格，利润空间受到挤压
              </div>
            </el-checkbox>
          </div>
          <div class="Radio_box">
            <el-checkbox v-model="answer.q5_c" disabled>
              <div class="check_box">C、人民币升值压力加大</div>
            </el-checkbox>
          </div>
          <div class="Radio_box">
            <el-checkbox v-model="answer.q5_d" disabled>
              <div class="check_box">D、出口退税率降低</div>
            </el-checkbox>
          </div>
          <div class="Radio_box">
            <el-checkbox v-model="answer.q5_e" disabled>
              <div class="check_box">E、劳动力成本上升</div>
            </el-checkbox>
          </div>
          <div class="Radio_box">
            <el-checkbox v-model="answer.q5_f" disabled>
              <div class="check_box">
                F、难以从外部渠道融资（包括银行和民间融资）
              </div>
            </el-checkbox>
          </div>
          <div class="Radio_box">
            <el-checkbox v-model="answer.q5_g" disabled>
              <div class="check_box">
                G、产品销售渠道不畅，产成品和应收货款占用上升
              </div>
            </el-checkbox>
          </div>
          <div class="Radio_box">
            <el-checkbox v-model="answer.q5_h" disabled>
              <div class="check_box">
                H、企业管理不善，效益不好，资金周转不灵
              </div>
            </el-checkbox>
          </div>
        </div>

        <div class="title_box">
          <img
            src="@/assets/images/REQUIRED.png"
            alt=""
            class="REQUIRED_imp"
          />
          06.
          <span class="question_type">【多选】</span>
          企业目前融资的主要形式:
        </div>
        <div class="input_box">
          <div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_a" disabled>
                <div class="check_box">
                  A、银行贷款
                </div>
              </el-checkbox>
            </div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_b" disabled>
                <div class="check_box">
                  B、票据
                </div>
              </el-checkbox>
            </div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_c" disabled>
                <div class="check_box">C、股权融资</div>
              </el-checkbox>
            </div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_d" disabled>
                <div class="check_box">D、债权融资</div>
              </el-checkbox>
            </div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_e" disabled>
                <div class="check_box">E、挂牌上市</div>
              </el-checkbox>
            </div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_f" disabled>
                <div class="check_box">
                  F、内部集资
                </div>
              </el-checkbox>
            </div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_g" disabled>
                <div class="check_box">
                  G、民间借贷
                </div>
              </el-checkbox>
            </div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_h" disabled>
                <div class="check_box">
                  H、其他
                </div>
              </el-checkbox>
            </div>
            <div class="Radio_box">
              <el-checkbox v-model="answer.q6_i" disabled>
                <div class="check_box">
                  I、目前无融资
                </div>
              </el-checkbox>
            </div>
          </div>

          <div class="title_box">
            <img
              src="@/assets/images/REQUIRED.png"
              alt=""
              class="REQUIRED_imp"
            />
            07.
            <span class="question_type">【多选】</span>
            企业的贷款资金主要用于以下哪些方面:
          </div>
          <div class="input_box">
            <div>
              <div class="Radio_box">
                <el-checkbox v-model="answer.q7_a" disabled>
                  <div class="check_box">
                    A、扩大生产规模
                  </div>
                </el-checkbox>
              </div>
              <div class="Radio_box">
                <el-checkbox v-model="answer.q7_b" disabled>
                  <div class="check_box">
                    B、技术研发改造
                  </div>
                </el-checkbox>
              </div>
              <div class="Radio_box">
                <el-checkbox v-model="answer.q7_c" disabled>
                  <div class="check_box">C、解决流动资金不足</div>
                </el-checkbox>
              </div>
              <div class="Radio_box">
                <el-checkbox v-model="answer.q7_d" disabled>
                  <div class="check_box">D、归还拖欠货款</div>
                </el-checkbox>
              </div>
              <div class="Radio_box">
                <el-checkbox v-model="answer.q7_e" disabled>
                  <div class="check_box">E、进出口资金需要</div>
                </el-checkbox>
              </div>
              <div class="Radio_box">
                <el-checkbox v-model="answer.q7_f" disabled>
                  <div class="check_box">
                    F、营销推广
                  </div>
                </el-checkbox>
              </div>
              <div class="Radio_box">
                <el-checkbox v-model="answer.q7_g" disabled>
                  <div class="check_box">
                    G、其他
                  </div>
                </el-checkbox>
              </div>
            </div>
          </div>


          <div class="title_box">
            <img
              src="@/assets/images/REQUIRED.png"
              alt=""
              class="REQUIRED_imp"
            />
            08. <span class="question_type">【单选】</span> 企业可提供的融资担保方式:
          </div>
          <div class="input_box">
            <div>
              <el-radio-group v-model="answer.q8">
                <div class="Radio_box">
                  <el-radio label="A" disabled>A、信用贷款</el-radio>
                </div>
                <div class="Radio_box">
                  <el-radio label="B" disabled>B、固定资产(房产、车辆、设备等)抵押</el-radio>
                </div>
                <div class="Radio_box">
                  <el-radio label="C" disabled>C、知识产权质押</el-radio>
                </div>
                <div class="Radio_box">
                  <el-radio label="D" disabled>D、其他资产质押</el-radio>
                </div>
                <div class="Radio_box">
                  <el-radio label="E" disabled>E、担保公司担保</el-radio>
                </div>
                <div class="Radio_box">
                  <el-radio label="F" disabled>D、其他第三方担保</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>

          <div class="title_box">
            <img
              src="@/assets/images/REQUIRED.png"
              alt=""
              class="REQUIRED_imp"
            />
            09. <span class="question_type">【选填】</span> 企业对融资方面是否还有其他诉求或建议，如有请在下方填写:
          </div>
          <div class="input_box">
            <el-input
              placeholder="请输入内容"
              v-model="answer.q9"
              :disabled="true"
            >
            </el-input>
          </div>

          <div class="title_box">
            <img
              src="../../../../assets/images/REQUIRED.png"
              alt=""
              class="REQUIRED_imp"
            />
            10.
            <span class="question_type">【选择】</span>
            企业对此次客户经理走访情况进行打分评价:
          </div>
          <div class="input_box score_box">
            <div v-for="item in 5" :key="item" class="score_img">
              <img src="../../../../assets/images/score_false.png" alt="" v-if="item>answer.q10"/>
              <img src="../../../../assets/images/score_true.png" alt="" v-if="item<=answer.q10"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      answer: {
        q1: '',
        q2: "",
        q3: "",
        q4: "",
        q5_a: "",
        q5_b: "",
        q5_c: "",
        q5_d: "",
        q5_e: "",
        q5_f: "",
        q5_g: "",
        q5_h: "",
        q6_a: "",
        q6_b: "",
        q6_c: "",
        q6_d: "",
        q6_e: "",
        q6_f: "",
        q6_g: "",
        q6_h: "",
        q6_i: "",
        q7_a: "",
        q7_b: "",
        q7_c: "",
        q7_d: "",
        q7_e: "",
        q7_f: "",
        q7_g: "",
        q8: "",
        q9: "",
        q10: 0,
      },

      item: {
        corpName: "",
        corpCredit: "",
        contactPhone: "",
        addressIsSyn: "",
        visitDate: "",
        visitStatus: "",
        visitRemark: "",
        visitPictureUrl: "",
        questionnaireStatus: "",
        qyQustion: "",
        shortName: "",
        contactPerson: "",
      },
      DialogVisible: false,
      url: "",
    };
  },
  watch: {
    answer(newVal, oldVal) {
      console.log(newVal, oldVal, "监听到了");
      if (newVal==null){
        return
      }
      if (newVal.q5_a == "true") {
        this.answer.q5_a = true;
      } else {
        this.answer.q5_a = false;
      }
      if (newVal.q5_b == "true") {
        this.answer.q5_b = true;
      } else {
        this.answer.q5_b = false;
      }
      if (newVal.q5_c == "true") {
        this.answer.q5_c = true;
      } else {
        this.answer.q5_c = false;
      }
      if (newVal.q5_d == "true") {
        this.answer.q5_d = true;
      } else {
        this.answer.q5_d = false;
      }
      if (newVal.q5_e == "true") {
        this.answer.q5_e = true;
      } else {
        this.answer.q5_e = false;
      }
      if (newVal.q5_f == "true") {
        this.answer.q5_f = true;
      } else {
        this.answer.q5_f = false;
      }
      if (newVal.q5_g == "true") {
        this.answer.q5_g = true;
      } else {
        this.answer.q5_g = false;
      }
      if (newVal.q5_h == "true") {
        this.answer.q5_h = true;
      } else {
        this.answer.q5_h = false;
      }

      if (newVal.q6_a == "true") {
        this.answer.q6_a = true;
      } else {
        this.answer.q6_a = false;
      }
      if (newVal.q6_b == "true") {
        this.answer.q6_b = true;
      } else {
        this.answer.q6_b = false;
      }
      if (newVal.q6_c == "true") {
        this.answer.q6_c = true;
      } else {
        this.answer.q6_c = false;
      }
      if (newVal.q6_d == "true") {
        this.answer.q6_d = true;
      } else {
        this.answer.q6_d = false;
      }
      if (newVal.q6_e == "true") {
        this.answer.q6_e = true;
      } else {
        this.answer.q6_e = false;
      }
      if (newVal.q6_f == "true") {
        this.answer.q6_f = true;
      } else {
        this.answer.q6_f = false;
      }
      if (newVal.q6_g == "true") {
        this.answer.q6_g = true;
      } else {
        this.answer.q6_g = false;
      }
      if (newVal.q6_h == "true") {
        this.answer.q6_h = true;
      } else {
        this.answer.q6_h = false;
      }
      if (newVal.q6_i == "true") {
        this.answer.q6_i = true;
      } else {
        this.answer.q6_i = false;
      }
      if (newVal.q7_a == "true") {
        this.answer.q7_a = true;
      } else {
        this.answer.q7_a = false;
      }
      if (newVal.q7_b == "true") {
        this.answer.q7_b = true;
      } else {
        this.answer.q7_b = false;
      }
      if (newVal.q7_c == "true") {
        this.answer.q7_c = true;
      } else {
        this.answer.q7_c = false;
      }
      if (newVal.q7_d == "true") {
        this.answer.q7_d = true;
      } else {
        this.answer.q7_d = false;
      }
      if (newVal.q7_e == "true") {
        this.answer.q7_e = true;
      } else {
        this.answer.q7_e = false;
      }
      if (newVal.q7_f == "true") {
        this.answer.q7_f = true;
      } else {
        this.answer.q7_f = false;
      }
      if (newVal.q7_g == "true") {
        this.answer.q7_g = true;
      } else {
        this.answer.q7_g = false;
      }
    },
  },

  mounted() {
  },
  methods: {
    isShow(item) {
      this.item = item;
      this.answer = JSON.parse(item.qsInfo);
      this.DialogVisible = true;
    },
  },
};
</script>

<style scoped lang="scss">
.iframe_box {
  width: 100%;
}

::v-deep .visit-form::-webkit-scrollbar {
  display: none;
}

::v-deep .el-dialog {
  margin-top: 5px !important;
}

.footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}


.head_box {
  width: 100%;
  // height: 125px;
  background: linear-gradient(180deg, #c5d7fb, #e5edfc);
  display: flex;
  padding: 20px;
  background-color: #2b98f0;
  // height: 200px;
  align-items: end;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // background-image: url("../../../../assets/images/wjdc_head_img.png");
}

.short_name {
  width: 50px;
  height: 50px;
  background-color: #d99d9a;
  font-size: 17px;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.head_box_right {
  margin-left: 12px;
  color: #000;
  height: fit-content;
}

.enterprise_name {
  font-size: 18px;
}

.enterprise_xydm {
  margin-top: 5px;
  color: #989898;
}

.head_box_right_three {
  display: flex;
  margin-top: 5px;
  align-items: center;
}

.zoufang_type {
  height: 20px;
  padding: 0 10px;
  background-color: #ec847c;
  color: #fff;
}

.wenjuan_type {
  height: 20px;
  padding: 0 10px;
  background-color: #fde9e7;
  color: #e14d3e;
  margin-left: 10px;
}

::v-deep .el-dialog--center .el-dialog__body {
  padding: 0 !important;
}

.ewm_icon {
  margin-left: 10px;

  img {
    height: 20px;
  }
}

.contant_box {
  padding: 0 20px 20px 20px;
}

.module_title {
  border-left: 5px solid #2b98f0;
  padding-left: 10px;
}

.detaile_input {
  padding: 20px 0;
  display: flex;
  border-bottom: 2px solid #f5f6f7;
}

.detaile_input_name {
  color: #2b98f0;
  min-width: 70px;
}

.zftp_title {
  padding: 20px 0;
  color: #2b98f0;
}

.zftp_contant {
  width: 100%;
  min-height: 150px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #bdbcbc;
}

.title_box {
  margin-top: 20px;
}

.question_type {
  color: #186ff5;
}

.input_box {
  margin: auto;
  margin-top: 15px;
}

.Radio_box {
  margin-bottom: 15px;
}

.check_box {
  white-space: normal;
}

::v-deep .el-checkbox {
  display: flex;
  align-items: center;
}

.REQUIRED_imp {
  margin-bottom: -2px;
}

.score_box {
  display: flex;
}

.score_img {
  margin-right: 20px;
}
</style>
